﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>后台管理系统</title>
        <link th:href="@{/style/css/default.css}" rel="stylesheet">
        <style>
            section{
                margin-top: 150px;
            }
        </style>
    </head>
    <body class="signin">
        <section>
            <div class="panel panel-signin">
                <div class="panel-body">
                    <h4 class="text-center mb5">后台管理系统</h4>
                    <div class="mb30"></div>

                    <form action="" id="loginForm" method="post">
                        <div class="input-group mb15">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="text" class="form-control" id="name" placeholder="输入用户名" name="name">
                        </div><!-- input-group -->
                        <div class="input-group mb15">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input type="password" class="form-control" id="password" placeholder="输入密码" name="password">
                        </div><!-- input-group -->
                        <div class="clearfix">
                            <div class="pull-right">
                                <button type="submit" onclick="login()" class="btn btn-success">登录 <i class="fa fa-angle-right ml5"></i></button>
                            </div>
                        </div>
                    </form>

                </div><!-- panel-body -->
            </div><!-- panel -->
        </section>


        <script th:src="@{/style/js/jquery.min.js}"></script>
        <script th:src="@{/style/js/sweetalert.min.js}"></script>
        <script>
            function login() {
                var name = $("#name").val()
                var password = $("#password").val()
                if (name === "" || password === ""){
                    alert("请输入用户名和密码！")
                }else {
                    $.ajax({
                        url:"/doLogin",
                        type: "post",
                        dataType: "json",
                        data: $("#loginForm").serialize(),
                        success: function (result){
                            if (result.msg==="ok"){
                                swal("登录成功！",{icon: "success",timer:1500})
                                location.href = "adminBook/admin"
                            }else {
                              alert("用户名或密码错误！")
                            }
                        },
                        error:function (){
                            swal("登录失败，请稍后再试！",{icon: "error",timer:1500})
                        }
                    })
                }

            }
        </script>
    </body>
</html>
